<template>
  <div class='list-box'>
    <div class='list-header'>
      <p>
        <el-select v-model='value' placeholder='全部'>
          <el-option
            v-for='item in options'
            :key='item'
            :label='item'
            :value='item'
          >
          </el-option>
        </el-select>
        <el-input
          placeholder='请输入关键词'
          prefix-icon='el-icon-search'
          v-model='inputValue'
        >
        </el-input>
      </p>
      <p>
        <el-button type='warning' @click="addProject">新增</el-button>
        <el-button type='warning' @click="editProject">编辑</el-button>
        <el-button type='danger' @click='deleteBtn'>删除</el-button>
      </p>
    </div>
    <el-table
      :data='list'
      border
      @selection-change='handleSelectionChange'
      style='width: 100% margin-top: 20px'
    >
      <el-table-column
        type='selection'
        header-align='center'
        align='center'
        width='55'
      >
      </el-table-column>
      <el-table-column
        label='项目编号'
        header-align='center'
        align='center'
        width='160
      '
      >
        <template slot-scope='scope'>
          <el-link type='primary' @click="showProject(scope.row)">{{ scope.row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop='name'
        header-align='center'
        align='center'
        label='项目名称'
      >
      </el-table-column>
      <el-table-column
        prop='desc'
        header-align='center'
        align='center'
        label='项目描述'
      >
      </el-table-column>
      <el-table-column
        prop='person'
        header-align='center'
        align='center'
        label='负责人'
      >
      </el-table-column>
      <el-table-column
        prop='createTime'
        header-align='center'
        align='center'
        label='创建日期'
      >
      </el-table-column>
      <el-table-column
        prop='updateTime'
        header-align='center'
        align='center'
        label='最后修改日期'
      >
      </el-table-column>
      <el-table-column
        prop='other'
        header-align='center'
        align='center'
        label='其他'
      >
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
    <StakeholdersAddAndEdit ref="stakeholdersAddAndEdit" />
  </div>
</template>

<script>
import StakeholdersAddAndEdit from './StakeholdersAddAndEdit.vue'
export default {
  components: { StakeholdersAddAndEdit },
  data() {
    return {
      value: '',
      inputValue: '',
      list: [
        {
          id: 'ABCD-1233',
          name: '北京大学第一医院城南院区项目',
          desc: '该项目占地面积约为202.9亩，拟建急诊急救中心、综合门诊..',
          person: '张三',
          createTime: '2024-05-21',
          updateTime: '2024-05-21',
          other: 'XXX',
          info: [
            {
              id: '1',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '2',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '3',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '4',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '5',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '6',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '采购部',
              position: '部长',
              role: '重要影响者',
              preference: '价格、账期',
              stance: '中立',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            },
            {
              id: '7',
              unit: '工程公司',
              weight: '中',
              companyName: 'XX建设有限公司',
              projectPerson: 'XX',
              department: '项目经理',
              position: '项目经理',
              role: '重要影响者',
              preference: '价格、账期',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            },
            {
              id: '8',
              unit: '工程公司',
              weight: '中',
              companyName: 'XX建设有限公司',
              projectPerson: 'XX',
              department: '商务部',
              position: '部长',
              role: '/',
              preference: '价格、账期',
              stance: '中立',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            },
            {
              id: '9',
              unit: '管理公司',
              weight: '低',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '商务部',
              position: '部长',
              role: '/',
              preference: '价格、账期',
              stance: '中立',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            }
          ]
        },
        {
          id: 'ABCD-1234',
          name: '华西医院锦江院区项目',
          desc: '该项目占地面积约为202.9亩，拟建急诊急救中心、综合门诊..',
          person: '张三',
          createTime: '2024-05-21',
          updateTime: '2024-05-21',
          other: 'XXX',
          info: [
            {
              id: '1',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '2',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '3',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '4',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '5',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '总经理',
              position: '总经理',
              role: '关键决策人',
              preference: '品质、服务',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售副总经理；XX',
              remarks: ''
            },
            {
              id: '6',
              unit: '业主单位',
              weight: '高',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '采购部',
              position: '部长',
              role: '重要影响者',
              preference: '价格、账期',
              stance: '中立',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            },
            {
              id: '7',
              unit: '工程公司',
              weight: '中',
              companyName: 'XX建设有限公司',
              projectPerson: 'XX',
              department: '项目经理',
              position: '项目经理',
              role: '重要影响者',
              preference: '价格、账期',
              stance: '支持',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            },
            {
              id: '8',
              unit: '工程公司',
              weight: '中',
              companyName: 'XX建设有限公司',
              projectPerson: 'XX',
              department: '商务部',
              position: '部长',
              role: '/',
              preference: '价格、账期',
              stance: '中立',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            },
            {
              id: '9',
              unit: '管理公司',
              weight: '低',
              companyName: 'XX有限公司',
              projectPerson: 'XX',
              department: '商务部',
              position: '部长',
              role: '/',
              preference: '价格、账期',
              stance: '中立',
              opponentialStance: '中立',
              layer: '销售总监；XX',
              remarks: ''
            }
          ]
        }
      ],
      options: [
        '项目编号',
        '项目名称',
        '项目描述',
        '负责人',
        '创建日期',
        '最后修改日期',
        '其他'
      ],
      multipleSelection: []
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(val, a) {
      this.multipleSelection = val
    },
    deleteBtn() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.multipleSelection.map((obj) => {
          for (let i = this.list.length; i >= 0; i--) {
            const index = this.list.findIndex((item) => item.id === obj.id)
            if (index !== -1) this.list.splice(index, 1)
          }
        })
      }
    },
    showProject(item) {
      this.$refs.stakeholdersAddAndEdit.handleOpen('show', item.info)
    },
    addProject() {
      this.$refs.stakeholdersAddAndEdit.handleOpen('add', [])
    },
    editProject() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.$refs.stakeholdersAddAndEdit.handleOpen('edit', this.multipleSelection[0].info)
      }
    }
  }
}
</script>
<style>
.list-box .list-header {
  margin-bottom: 15px;
  overflow: hidden;
}
.list-box .list-header > h2 {
  width: 50%;
  float: left;
}
.list-box .list-header > p:nth-of-type(1) {
  width: 50%;
  float: left;
}
.list-box .list-header > p:nth-of-type(1) .el-select {
  width: 140px;
}
.list-box .list-header > p:nth-of-type(2) {
  width: 50%;
  float: right;
  text-align: right;
}
.list-box .list-header > p:nth-of-type(1) .el-input {
  width: 250px;
  display: inline-block;
}
.list-box .el-button {
  padding: 8px 20px;
}
.list-box .el-button--warning, .list-box .el-button--warning:focus, .list-box .el-button--warning:hover {
  background: #ff8000;
  border-color: #ff8000;
}
.list-box .el-link--inner {
 padding: 0 10px;
}
.list-box .el-table .el-table__cell {
  padding: 2px 0;
}
.list-box .el-table thead {
  color: #000000;
}
.list-box .el-table--border .el-table__cell,
.list-box .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #000000;
}
.list-box .el-table td.el-table__cell,
.list-box  .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #000000;
}

.list-box  .el-table--border,
.list-box  .el-table--group {
  border: 2px solid #000000;
}
.list-box  .el-table {
  color: #000000;
}
.list-box .page-box {
  margin-top: 10PX;
}
.list-box .page-box .el-pagination {
  text-align: right;
}
</style>
